<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta  content="ie=edge">
    <link rel="stylesheet" href="layui/css/layui.css">
    <title>小说简要信息页</title>
    <style>
        .novel-bg {
            background-color: white;
            width: 100%;
            margin-top: 60px;
        }

        .imgdiv {
            height: 250px;
            border: solid white 1px;
            overflow: hidden;
        }
		a{
			cursor:pointer;
		}
        a img {
            cursor: pointer;
            transition: all 0.6s;
        }

        a img:hover {
            transform: scale(1.1);
        }

        #lable button {
            pointer-events: none;
            background-color: white;
            color: black;
            border: solid black 1px
        }

        #lable a {
            color: orangered;
            background-color: white;
            border: solid orangered 1px
        }
    </style>
</head>

<body class="layui-bg-gray">
    <!--顶部导航栏-->
     <%@ include file="novelhead.jsp" %>   
    <!--内容部分-->
    <div style="margin-top:20px">
        <div class="layui-row">
            <div class="layui-col-md8 layui-col-lg-offset2">
                <!--小说所属标签-->
                <div style="margin-bottom: 50px;">
                    <span class="layui-breadcrumb" lay-separator=">">
                        <a href="novelmain.action">首页</a>
                        <a href="">${novel.typename }频道</a>
                        <a href="">${novel.novelname}</a>
                    </span>
                </div>
                <!--小说信息-->
                <div class="layui-row  layui-col-space20 novel-bg">
                    <!--小说封面图-->
                    <div class="layui-col-md3 imgdiv">
                        <a href="">
                            <img src="../upload/${novel.photourl}" style="width: 100%;height:100%">
                        </a>
                    </div>
                    <div class="layui-col-md9">
                        <ul>
                            <!--小说标题和作者-->
                            <li>
                                <h1 style="display:inline"><b>${novel.novelname}</b></h1> &nbsp;&nbsp;&nbsp;&nbsp;
                                <a href="authormain.action?userid=${novel.userid }">${novel.nickname }</a>&nbsp;著
                            </li>
                            <!--小说所属标签-->
                            <li style="margin-top: 15px" id="lable">
	                            <c:if test="${novel.novelstatus == 1}">
	                            	<button class="layui-btn layui-btn-sm layui-btn-radius lableun">完本</button>
	                            </c:if>
	                            <c:if test="${novel.novelstatus == 2}">
	                            	<button class="layui-btn layui-btn-sm layui-btn-radius lableun">连载</button>
	                            </c:if>
                                <button class="layui-btn layui-btn-sm layui-btn-radius lableun">签约</button>
                                <button class="layui-btn layui-btn-sm layui-btn-radius lableun">VIP</button>
                                <a href="" class="layui-btn layui-btn-sm layui-btn-radius lableno">${novel.typename }</a>
                                <a href="" class="layui-btn layui-btn-sm layui-btn-radius lableno">异世大陆</a>
                            </li>
                            <!--作者个性签名-->
                            <li style="margin-top: 15px">${user.signature }</li>
                            <!--小说数据-->
                            <li style="margin-top: 15px">
                                <span class="layui-breadcrumb" lay-separator="<h2 style='display:inline'>|</h2>">
                                    <a>
                                        <cite>
                                            <h2 style="display:inline"><b>507.09</b></h2>万字
                                        </cite>
                                    </a>
                                    <a>
                                        <cite>
                                            <h2 style="display:inline"><b>507.09</b></h2>万点击数
                                        </cite>
                                    </a>
                                    <a>
                                        <cite>
                                            <h2 style="display:inline"><b>507.09</b></h2>万推荐
                                        </cite>
                                    </a>
                                    <a>
                                        <cite>
                                            <h2 style="display:inline"><b>507.09</b></h2>万浏览数
                                        </cite>
                                    </a>
                                </span>
                            </li>
                            <!--小说选项-->
                            <li style="margin-top: 15px">
                            	<a href="calenred.action?novelid=${novel.novelid}">
                            		<button class="layui-btn layui-btn layui-btn-danger">免费试读</button>
                            	</a>
                                <c:if test="${loginuser==null}">
	                                <a href="login.jsp">
	                            		<button class="layui-btn layui-btn layui-btn-primary">加入书架</button>
	                            	</a>
                                </c:if>
                                <c:if test="${loginuser!=null}">
	                                <a href="addbooksroom.action?novelid=${novel.novelid}&userid=${loginuser.userid}&chapterid=1">
	                            		<button class="layui-btn layui-btn layui-btn-primary">加入书架</button>
	                            	</a>
                                </c:if>
                                <c:if test="${loginuser.userid!=novel.userid&&loginuser.userid!=null}">
			                    	<a href="addnovelticketcont.action?novelid=${novel.novelid }" 
				                    	onclick="" class="layui-btn" style="float:right;margin-right:130px;background:orange">
				                    	+投推荐票
			                    	</a>             
			                    </c:if>
			                    <c:if test="${loginuser.userid!=novel.userid&&loginuser.userid==null}">
			                    	<a href="login.jsp" 
				                    	class="layui-btn" style="float:right;margin-right:130px;background:orange">
				                    	+投推荐票
			                    	</a>             
			                    </c:if>
                            </li>
                        </ul>
                    </div>
                    <div class="layui-col-md12" style="margin-top:30px;margin-bottom: 30px">
                        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                            <ul class="layui-tab-title">
                                <li class="layui-this">
                                    <h2><b>作品信息</b></h2>
                                </li>
                                <li>
                                    <h2><b>目录（${count}）</b></h2>
                                </li>
                            </ul>
                            <!--选项卡内容框-->
                            <div class="layui-tab-content">
                                <!--小说简介-->
                                <div class="layui-tab-item layui-show layui-col-space15">
                                    <div class=" layui-col-md9" style="margin-top: 20px;margin-bottom: 20px">
                                        <h4>${novel.abstrac }</h4>
                                        <!--小说推荐-->
                                        <div class="layui-card" style="margin-top: 50px;">
                                            <div class="layui-card-header">
                                                <h3><b>作者相关作品</b></h3>
                                            </div>
                                            <div class="layui-card-body layui-row layui-col-space30">
                                            	<c:forEach items="${novellist }" var="list" >
	                                                <div class="layui-col-md2" style="text-align: center">
		                                                <a href="novel.action?novelid=${list.novelid}">
		                                                	<img src="../upload/${list.photourl}" style="width:100%">
		                                                    ${list.novelname}
		                                                </a>                   
	                                                </div>
                                                </c:forEach>
                                            </div>
                                        </div>
                                    </div>

                                    <!--小说作者信息-->
                                    <div class="layui-col-md3 layui-col-space15 layui-bg-gray"
                                        style="text-align: center;margin-top: 30px;">
                                        <div style="margin-top:30px">
	                                        <a href="authormain.action?userid=${user.userid }">
	                                            <img src="../upload/${user.photourl}" style="width:80px;height:80px"
	                                                class="layui-circle">
	                                            <h3>
	                                                <b>
	                                                    ${user.nickname }
	                                                </b>
	                                            </h3>
                                            </a>
                                            <h4>${user.signature }</h4>
                                            <hr>
                                        </div>
                                        <div style="" class="layui-col-md4">
                                            <img src="img/novelnum.jpg" style="width:40px;height:40px;"
                                                class="layui-circle">
                                            <h6 style="font-size: 4px;margin-top: 5px;">作品数量</h6>
                                            <h6 style="font-size: 4px;margin-top: 5px;color: red"><b>${user.novelcount }</b></h6>
                                        </div>
                                        <div style="" class="layui-col-md4">
                                            <img src="img/textnum.jpg" style="width:40px;height:40px;"
                                                class="layui-circle">
                                            <h6 style="font-size: 4px;margin-top: 5px;">累计字数</h6>
                                            <h6 style="font-size: 4px;margin-top: 5px;color: red"><b>4028.86万</b></h6>
                                        </div>
                                        <div style="" class="layui-col-md4">
                                            <img src="img/daynum.jpg" style="width:40px;height:40px;"
                                                class="layui-circle">
                                            <h6 style="font-size: 4px;margin-top: 5px;">创作天数</h6>
                                            <h6 style="font-size: 4px;margin-top: 5px;color: red"><b>5103</b></h6>
                                        </div>
                                    </div>
                                </div>

                                <!--小说目录列表-->
                                <div class="layui-tab-item">
                                    <div class="layui-card" style="margin-top: 20px;margin-bottom: 20px">
                                         <div class="layui-card-header">
                                            <h3 style="display:inline"><b>小说畅读·共8章</b></h3>
                                            <button class="layui-btn layui-btn layui-btn-xs"
                                                style="pointer-events: none;">免费</button>
                                            <a>本卷共57705字</a>
                                        </div>
                                        <hr class="layui-bg-black">
                                        <div class="layui-card-body">
                                            <ul class="layui-row">
	                                            <c:forEach items="${novelContent}"  var="chapter" >
		                                            <c:if test="${chapter.charge=='False'}">
		                                                <li class="layui-col-md4" style="text-align: left;margin-bottom: 5px">
			                                                <a href="novelchap.action?chapterid=${chapter.chapterid}&novelid=${chapter.novelid}">
			                                                	${chapter.chaptername }
			                                                </a>
		                                                </li> 
	                                                </c:if>
	                                           	</c:forEach>
                                            </ul>
                                        </div>
                                        <div class="layui-card-header">
                                            <h3 style="display:inline"><b>小说热销·共8章</b></h3>
                                            <button class="layui-btn layui-btn layui-btn-xs"
                                                style="pointer-events: none; background-color: orangered">付费</button>
                                            <a>本卷共57705字</a>
                                        </div>
                                        <hr class="layui-bg-black">
                                        <div class="layui-card-body">
                                            <ul class="layui-row">
                                                <c:forEach items="${novelContent }" var="chapter" >
	                                                <c:if test="${chapter.charge=='True'}">
		                                                <li class="layui-col-md4" style="text-align: left;margin-bottom: 5px">
			                                                <a href="novelchap.action?chapterid=${chapter.chapterid}">
			                                                	${chapter.chaptername }              	
			                                                </a>
	                                                	</li>  
	                                            	</c:if>
                                           		</c:forEach> 
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </div>
    </div>
    <%@ include file="foot.jsp" %>
    <script src="layui/layui.js"></script>
    <!--导航js-->
    <script>
        //注意：导航 依赖 element 模块，否则无法进行功能性操作
        layui.use('element', function () {
            var element = layui.element;

            //…
        });
    </script>
    <!--选项卡js-->
    <script>
        //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
        layui.use('element', function () {
            var element = layui.element;

            //…
        });
    </script>
</body>

</html>